<script setup>
import * as api from "@/api/v-sys-service/exam/paper/index.js";
import Constants from "@/const"

const emits = defineEmits([
  'update:modelValue'
])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  examId: {
    type: String,
    default: ""
  }
})

const visible = computed(
    {
      get(){
        return props.modelValue
      },
      set(val){
        emits('update:modelValue',val)
      }
    }
)


/**
 * 列表数据
 */
const tableData = ref([])

/**
 * loading状态
 */
const loading = ref({
  tableLoading: false,// 列表loading
})


/**
 * 计算表格属性
 */
const tableInfo = computed(()=>{
  const tableProps = {
    data: tableData.value,
    loading: loading.value.tableLoading,
    rowConfig: { keyField: 'id' },
    checkboxConfig: { highlight: false, reserve: true },
    showSelectCount: false,
    showExportBtn: false,
  }
  return { ...tableProps }
})

/**
 * 分页参数
 */
const pageQuery = reactive({
  page: 1,
  limit: 50,
  total: 0,
  url: '/cloud-xxx-service/exam/page',
  orders: [
    // {column: "createTime", asc: false}
  ],
  filters: [],
  condition: {
    key: "",
    examId: props.examId
  },
})

/**
 * 组件初始化调用函数
 */
const init = () => {
  if (props.examId) init_PageQuery()
}

/**
 * 分页查询
 */
const init_PageQuery = async () => {
  loading.value.tableLoading = true
  const { code, data } = await api.page(pageQuery)
  if (code === 200) {
    loading.value.tableLoading = false
    tableData.value = data.records
    pageQuery.total = data.total
  }
}


/**
 * 组件挂载后
 */
onMounted(() => {
  init()
})

</script>

<template>
  <v-dialog v-model="visible" title="考试排行榜" :show-btn="false">
    <div class="paper-box flex flex-col">
      <v-table
          v-model="pageQuery"
          :table-info="tableInfo"
          :column-info="api.columnInfo"
          @query="init_PageQuery"
          :marginBottomHeight="500"
      >
        <template #examResult="{row}">{{ Constants.EXAM_RESULT[row.examResult].label }}</template>
      </v-table>
    </div>
  </v-dialog>
</template>

<style scoped lang="scss">
  .paper-box {

    .container {
      :deep(.el-tag) {
        cursor: pointer;
      }
      :deep(.el-button) {
        padding: 0;
      }
    }
  }
</style>
